<template>
	<Container>
		<Back :toHome="toHome" />
		<view class="banner"><ImageLoad :src="detailData.coverUrl"/></view>
		<view class="banner-title">{{ detailData.name }}</view>
		<view class="description">{{ detailData.summary }}</view>
		<view class="menu">
			<view class="detail">
				{{ detailData.merchantName }}
				<view class="score">
					<view><Star :count="detailData.score"/></view>
					<text>{{ detailData.score }}分</text>
				</view>
			</view>

			<view class="map">
				<image class="address-icon img" src="../../static/icon/address.png" mode="widthFix"></image>
				<view class="address" @tap="mapTap">
					<text class="address-datail">{{ detailData.address }}</text>
				</view>
				<view class="mark"></view>
				<image class="callme img" @tap="phoneTouch" src="../../static/icon/callme.png" mode="widthFix"></image>
			</view>
		</view>
		<view class="column">
			<view v-if="detailData.contentType !== 'dom'">
				<view v-for="(item, index) in detailData.items" :key="index">
					<view v-if="item.type === 'text'" :style="item.style" class="text">{{ item.value }}</view>
					<view v-if="item.type === 'image'" :style="{ height: 670 / item.sizeRatio + 'rpx' }" class="image"><ImageLoad :src="item.value" mode="widthFix"/></view>
					<video v-if="item.type === 'video'" :style="{ height: 670 / item.sizeRatio + 'rpx' }" class="video" :src="item.value"></video>
				</view>
			</view>
			<rich-text class="rich" v-if="detailData.contentType === 'dom'" :nodes="detailData.dom"></rich-text>
		</view>
		<EditorIcon v-if="hasMerchant" type="course" />
		<Comment v-if="commentIsShow" scene="course" :sceneId="detailData.id" :scrollTop="scrollTop" />
	</Container>
</template>

<script>
import Star from '../../components/star/star.vue'
import Comment from '../../components/comment/comment.vue'
import EditorIcon from '../../components/editorIcon/editorIcon.vue'
export default {
	data() {
		return {
			detailData: {},
			hasMerchant: this.hasMerchant,
			scrollTop: 0,
			toHome: false,
			commentIsShow: true
		}
	},
	components: { Star, Comment, EditorIcon },
	onShareAppMessage() {
		let item = JSON.stringify(this.detailData)
		item = item.replace(/&nbsp;/g, ' ')
		return {
			title: this.detailData.summary,
			path: '/pages/course/detail?type=share&item=' + item,
			imageUrl: ''
		}
	},
	methods: {
		/**
		 * 点击拨打电话
		 */
		phoneTouch: function() {
			uni.makePhoneCall({
				phoneNumber: this.detailData.contact
			})
		},
		/**
		 * 点击跳转地图
		 */
		mapTap: function() {
			this.$Router.push({ name: 'map', query: { item: JSON.stringify(this.detailData.location) } })
		}
	},
	onLoad(option) {
		if (!option) {
			this.detailData = JSON.parse(this.shareItem)
			this.toHome = true
		} else {
			if (option.type === 'share') {
				this.toHome = true
				this.detailData = JSON.parse(option.item)
			} else {
				this.detailData = JSON.parse(decodeURIComponent(option.item))
			}
		}
		console.log(this.detailData)
		if (this.detailData.contentType === 'dom') {
			this.detailData.dom = this.detailData.dom.replace(/\<img/g, '<img style="max-width:98%;height:auto;border-radius:20px"')
		}
		if (this.detailData.type === 'test') {
			this.hasMerchant = false
			this.commentIsShow = false
			return
		}
		this.$post(this.api.trackCourse, { deviceUuid: this.deviceUuid, courseId: this.detailData.id })
	},
	onPageScroll: function(res) {
		this.scrollTop = res.scrollTop
	}
}
</script>

<style scoped lang="stylus">
.banner
	position relative
	width 750rpx
	height 500rpx
	border-radius 0 0 5% 5%
	overflow hidden
	transform translate3d(0, 0, 0)

.banner-title
	font-size 45rpx
	font-weight bold
	width fit-content
	margin 30rpx 0 0 30rpx

.description
	font-size 28rpx
	color #7C7875
	width fit-content
	margin 20rpx 0 0 30rpx

.menu
	width 700rpx
	height 260rpx
	margin 40rpx auto
	border-radius 20rpx
	background white
	box-shadow 0 0 50rpx #dcdfe6

	.detail
		width 640rpx
		margin-left 30rpx
		height 90rpx
		font-size 30rpx
		display flex
		align-items center
		border-bottom 1px solid #EBEBEB
		padding-left 15rpx
		box-sizing border-box

	.score
		margin-left auto
		display flex
		align-items center

		view
			width 200rpx
			height 35rpx
			position relative
			margin-right 20rpx

	.map
		width 100%
		height 170rpx
		display flex
		align-items center

		.address-icon
			width 30rpx
			height auto
			margin-left 20rpx

		.address
			width 500rpx
			height auto
			display flex
			flex-direction column
			margin-left 20rpx

			.address-datail
				font-size 30rpx

			.address-nearby
				font-size 22rpx
				color #888686

		.mark
			width 2rpx
			height 50rpx
			background #E2E1E1
			margin-left 10rpx

		.callme
			width 90rpx
			height auto
			margin-left 15rpx

.column
	width 700rpx
	height auto
	min-height 300rpx
	margin 40rpx auto
	border-radius 20rpx
	background white
	box-shadow 0 0 50rpx #dcdfe6
	display flex
	flex-direction column
	padding-bottom 50rpx

	.text
		font-size 30rpx
		margin 10rpx 40rpx

	.image
		width 670rpx
		// height auto
		margin 20rpx auto
		position relative
		overflow hidden
		border-radius 30rpx
		transform translate3d(0, 0, 0)
		box-shadow 0 0 10rpx #FFEEC8

	.video
		width 670rpx
		height 400rpx
		margin 25rpx 15rpx
		border-radius 30rpx
		box-shadow 0 0 10rpx #FFEEC8
</style>
